import React, { Fragment, useEffect } from 'react';
import ReactEcharts from 'echarts-for-react';
import {useSelector} from 'react-redux';
import '../daoDemo1/index1.css'

import White from '../../../assets/image/yxType/空白.png';

import YX01 from '../../../assets/image/yxType/白云岩.png';
import YX02 from '../../../assets/image/yxType/粗砂岩.png';
import YX03 from '../../../assets/image/yxType/粉砂岩.png';
import YX04 from '../../../assets/image/yxType/钙质砂岩.png';
import YX05 from '../../../assets/image/yxType/钙质页岩.png';  //
import YX06 from '../../../assets/image/yxType/钙质粘土.png';
import YX07 from '../../../assets/image/yxType/黄土.png';
import YX08 from '../../../assets/image/yxType/灰岩.png';
import YX09 from '../../../assets/image/yxType/角砾岩.png';
import YX10 from '../../../assets/image/yxType/中砂岩.png';


import YX11 from '../../../assets/image/yxType/砾岩.png'; //
import YX12 from '../../../assets/image/yxType/煤.png';
import YX13 from '../../../assets/image/yxType/泥灰岩.png';
import YX14 from '../../../assets/image/yxType/泥质白云岩.png'; //
import YX15 from '../../../assets/image/yxType/泥质粉砂岩.png';
import YX16 from '../../../assets/image/yxType/泥质灰岩.png';
import YX17 from '../../../assets/image/yxType/泥质砂岩.png';
import YX18 from '../../../assets/image/yxType/凝灰质砂岩.png';
import YX19 from '../../../assets/image/yxType/砂砾石.png';
import YX20 from '../../../assets/image/yxType/砾石.png'; //

import YX21 from '../../../assets/image/yxType/砂质泥灰岩.png';
import YX22 from '../../../assets/image/yxType/砂质页岩.png';
import YX23 from '../../../assets/image/yxType/碳质灰岩.png';
import YX24 from '../../../assets/image/yxType/碳质页岩.png';
import YX25 from '../../../assets/image/yxType/碳质粘土.png';
import YX26 from '../../../assets/image/yxType/填筑土.png';
import YX27 from '../../../assets/image/yxType/细砂岩.png';
import YX28 from '../../../assets/image/yxType/页岩.png';
import YX29 from '../../../assets/image/yxType/粘土.png';
import YX30 from '../../../assets/image/yxType/粘土岩(泥质).png';



export const YxEchartsShow = () => {   // 接收传入的属性
 
  const depthDataa = useSelector(state => state.depthDataa);
  const daosDataList = useSelector(state => state.daosDataList);     
  const markLineData = useSelector(state => state.videoMarkline);
  // const hgridNumber = useSelector(state => state.gridConfig.hgridNumber)
  // const vgridNumber = useSelector(state => state.gridConfig.vgridNumber)
  const chartZoom = useSelector(state => state.gridConfig.chartZoom);

  const docData = useSelector(state => state.docData);
  let doc_start_depth=0

  useEffect(()=>{
    // console.log(docData)
    if(docData.doc_type=="绘图文件"&&docData.docData){
      doc_start_depth=docData.docData.start_depth
    }else if(docData.doc_type=="纯数据文件"){
      doc_start_depth=docData.start_depth
    }
    // console.log(doc_start_depth)
  },[JSON.stringify(daosDataList)])

  function showYxPic(type){
    //console.log("yxPic",type);
    if(type === 'rock-1'){ return YX01 }
    else if(type === 'rock-2'){ return YX02 }
    else if(type === 'rock-3'){ return YX03 }
    else if(type === 'rock-4'){ return YX04 }
    else if(type === 'rock-5'){ return YX05 }
    else if(type === 'rock-6'){ return YX06 }
    else if(type === 'rock-7'){ return YX07 }
    else if(type === 'rock-8'){ return YX08 }
    else if(type === 'rock-9'){ return YX09 }
    else if(type === 'rock-10'){ return YX10 }

    else if(type === 'rock-11'){ return YX11 }
    else if(type === 'rock-12'){ return YX12 }
    else if(type === 'rock-13'){ return YX13 }
    else if(type === 'rock-14'){ return YX14 }
    else if(type === 'rock-15'){ return YX15 }
    else if(type === 'rock-16'){ return YX16 }
    else if(type === 'rock-17'){ return YX17 }
    else if(type === 'rock-18'){ return YX18 }
    else if(type === 'rock-19'){ return YX19 }
    else if(type === 'rock-20'){ return YX20 }

    else if(type === 'rock-21'){ return YX21 }
    else if(type === 'rock-22'){ return YX22 }
    else if(type === 'rock-23'){ return YX23 }
    else if(type === 'rock-24'){ return YX24 }
    else if(type === 'rock-25'){ return YX25 }
    else if(type === 'rock-26'){ return YX26 }
    else if(type === 'rock-27'){ return YX27 }
    else if(type === 'rock-28'){ return YX28 }
    else if(type === 'rock-29'){ return YX29 }
    else if(type === 'rock-30'){ return YX30 }
  }
  

  // daosDataList.map((item) => {   // 有数据，进行渲染
  //   if(item.type === "yx-dao"){   // 每条岩性道，自带一条曲线，有且仅有一条。
  //     yxData.splice(0,yxData.length);    //将原数组清空
  //     if(item.curves[0].xData.length !== 0){
  //       item.curves[0].xData.map((item1) => {
  //         yxData.push({min:item1.start_depth, max:item1.end_depth, symbol:'image://'+ showYxPic(item1.yx_id)});  //symbol:'image://'+ item1.yx_type
  //       })
  //     }  
  //   }    
  // });
  // if(yxData.length === 0){  // 没有 岩性曲线，渲染 白色
  //   yxData.push({min:depthDataa[0], max:depthDataa[depthDataa.length-1], color: 'white'});
  // }
  //console.log("docData",docInfo,yxData);
  
  // function generateData(min,max) {
  //   let data = [];
  //   for (let i = min; i <= max; i+=0.5) {   //i+=0.1
  //     data.push(i.toFixed(1));   //.toFixed(1)
  //   }
  //   //console.log("lala",data)
  //   return data;
  // }
 
  // var data = generateData(Number(depthDataa[0]),Number(depthDataa[depthDataa.length-1]));   
  //console.log("datadeth",data);

  // const option = {
  //   grid: {   // 直角坐标系内绘图网格
  //     left: '0',   // grid 组件离容器左侧的距离。
  //     right: '0',
  //     top:'0',  // 9
  //     bottom: '0',
  //     containLabel: true  //grid 区域是否包含坐标轴的刻度标签,true:防止标签溢出
  //   },

  //   xAxis: {
  //     type: 'category',    // value: 数值轴，连续数据  => 最终只规定 起始值 和 终值     
  //     data:['岩性分层'],   
  //     axisLabel: {  // 刻度标签
  //       show: false, 
  //     },
  //     axisLine: {  // 轴线
  //       show: false,
  //       onZero: false,
  //     },
  //     axisTick: {  // 刻度线
  //       show: false
  //     },
  //     boundaryGap: false,
  // },

  //   yAxis: {
  //     type: 'value',  // category：类目轴，离散的类目数据
  //     min: depthDataa[0],
  //     max: depthDataa[depthDataa.length-1],
  //     inverse : true,  // 倒序
  //     axisLine: {
  //       show: false,
  //       onZero: false
  //     },
  //     axisLabel: {
  //       show: false,
  //     },
  //     splitLine:{  // 网格线,随后删掉
  // 　　　show:true
  // 　　},
  //     axisTick: {  // 刻度线
  //       //show: false,
  //     },
  //     boundaryGap: false,   // 坐标轴两边留白  
  //   },

  //   visualMap: {
  //     show:false,    
  //     type: 'piecewise',  // 分段型piecewise,continuous
  //     pieces: yxData
  //     // [    // lt:小于, gt:大于, lte:小于等于, gte:大于等于
  //     //   {min:0, max:5, symbol:'image://'+ DB19},   //symbol:'image://'+ DB19
  //     //   {min:10, max:16, symbol: 'image://'+ DN07},
  //     //   {min:22, max:30, symbol: 'image://'+ DS06 },
  //     //   {min:60, max:64.5, symbol:'image://'+ DN01},
  //     //   {min:100, max:104.5, symbol:'image://'+ DY01},
  //     //   // {min:60, max:86, symbol:'image://'+ Dq09},  
  //     // ],
  //     //yxData
  //   },
  //   series: [
  //     {
        
  //         name: '岩性分层',
  //         type: 'scatter',
  //         data: data,  //  [0,0.1,1,1.5,2,2.5,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8,8.8,9,9.5,10,10.5,11,11.5,12,12.5,13,13.5,14,14.5,15],   //data
  //         symbolSize: [240,20],
  //         hoverAnimation:false,   // 鼠标移入时不变大
  //         large: true
      


  //       // type: 'pictorialBar',    //pictorialBar
  //       // barWidth: '100%',
  //       // barGap : '-100%',
  //       // symbolSize: ['100%',30],
  //       // symbolRepeat: true,
  //       // symbolMargin: 0,
  //       // symbolClip: true,   // 多余的剪掉
  //       // z: 10,  
  //       // data:[
  //       //   {
  //       //     value: 30,
  //       //     symbol: 'image://'+ DY01 
  //       //   },
  //       //   {
  //       //     value: 25,
  //       //     symbol: 'image://'+ DN01 
  //       //   },
  //       //   {
  //       //     value: 20,
  //       //     symbol: 'image://'+ DS06 
  //       //   },{
  //       //     value: 15,
  //       //     symbol: 'image://'+ DN07
  //       //   },{
  //       //     value: 10,
  //       //     symbol: 'image://'+ Dq09             
  //       //   },{
  //       //     value: 5,
  //       //     symbol: 'image://'+ DB19 
  //       //   },
          
  //       // ],




  //       // markArea: {
  //       //   data: [
  //       //     [{
  //       //       xAxis: '1h',
  //       //       yAxis: 10,
  //       //       itemStyle:{
  //       //         color: 'yellow'
  //       //         //symbol: 'image://'+DN08             
  //       //       },
  //       //     }, {
  //       //       xAxis: '2h',
  //       //       yAxis: 25,
  //       //     }],[{
  //       //       xAxis: '1h',
  //       //       yAxis: 30,
  //       //       itemStyle:{
  //       //         color: 'pink'            
  //       //       },
  //       //     }, {
  //       //       xAxis: '2h',
  //       //       yAxis: 35,
  //       //     }]
  //       //   ],
  //       // }
  //     }
  //   ]
  // };
  useEffect(()=>{
    daosDataList.map(item=>{
      //默认只有一个岩性道
      if(item.type=="yx-dao"){
        let dom=document.getElementById('my-canvas')

        dom.height=((depthDataa[depthDataa.length-1] - depthDataa[0])/5)*2*chartZoom ;
        dom.width=200;

        var ctx=dom.getContext("2d");
        // ctx.clearRect(0,0,dom.width,dom.height)
        // //json结构不确定可能需要改
        item.curves[0].xData.map(el=>{
          let img =new Image()

          if(el!=""){
            img.src=showYxPic(el.yx_id) ;//类似于png_1
            img.onload = setTimeout(function () {
              ctx.fillStyle = ctx.createPattern(img, 'repeat');
              // console.log((el.end_depth-el.start_depth)*2*chartZoom/5)
              ctx.fillRect(0,(el.start_depth-doc_start_depth)*2*chartZoom/5,198,(el.end_depth-el.start_depth)*2*chartZoom/5);
            },100)
          }
          
        })
      }
    })
  },[JSON.stringify(daosDataList)])

  return (
    <div className="depth-show1" style={{width:200,height:  ((depthDataa[depthDataa.length-1] - depthDataa[0])/5)*2*chartZoom }}>       {/*  (（终深-起深）/5)*200  */}
      {/* <ReactEcharts
        option={option}
        style={{height:'100%',width:'100%'}}
      /> */}
      {/* 这里不对画布进行样式的设置，在js里面设置，设置好像会造成图片渲染形变 */}
      <canvas id='my-canvas'>        
      </canvas>
    </div>  
  )
};